<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="utf-8">
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>个人音乐播放器 - 管理员登录</title>

  <!-- 引入 Bootstrap 和 jQuery -->
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <script src="js/jquery-3.1.1.min.js"></script>
  <script src="js/md5.min.js"></script>
  <script src="js/bootstrap.min.js"></script>

  <style>
    body {
      background: url("images/login.png") no-repeat center center fixed;
      background-size: cover;
    }

    .login-container {
      width: 400px;
      margin-top: 110px;
      background-color: rgba(255, 255, 255, 0.85);
      padding: 20px;
      border-radius: 10px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    }
  </style>

  <script>
    $(document).ready(function () {
      $("#submit").click(login);
      $("#password").keypress(function (e) {
        if (e.which === 13) login(); // 监听回车键
      });

      function login() {
        let username = $("#user").val().trim();
        let password = $("#password").val().trim();

        if (!username || !password) {
          showMessage("请输入用户名和密码!", "warning");
          return;
        }

        password = md5(password); // 对密码进行MD5加密

        $.ajax({
          url: "/user/login",
          type: "POST",
          data: { "username": username, "password": password },
          dataType: "json",
          success: function (data) {
            if (data.status === 0) {
              window.location.href = "list.html";
            } else {
              showMessage("登录失败，账号或密码错误，请重试!", "danger");
              $("#user, #password").val("");
            }
          },
          error: function () {
            showMessage("服务器错误，请稍后再试!", "danger");
          }
        });
      }

      function showMessage(msg, type) {
        $("#message").text(msg).parent().removeClass("alert-warning alert-danger").addClass("alert-" + type).show();
      }
    });
  </script>
</head>

<body>
<div class="container login-container">
  <h3 class="text-center">管理员登录</h3>

  <div class="form-group">
    <label for="user">用户名：</label>
    <input type="text" id="user" class="form-control" placeholder="请输入用户名">
  </div>

  <div class="form-group">
    <label for="password">密码：</label>
    <input type="password" id="password" class="form-control" placeholder="请输入密码">
  </div>

  <div class="form-group text-center">
    <button id="submit" class="btn btn-primary btn-block">登录</button>
  </div>

  <!-- 错误提示框 -->
  <div class="alert alert-warning alert-dismissible fade show" role="alert" style="display: none;">
    <strong id="message">您尚未进行登录，请您登录!</strong>
    <button type="button" class="close" data-dismiss="alert">&times;</button>
  </div>

  <!-- 测试账号提示 -->
  <div class="alert alert-info alert-dismissible fade show" role="alert">
    <strong>测试账号：</strong>test <strong>密码：</strong>test
    <button type="button" class="close" data-dismiss="alert">&times;</button>
  </div>
</div>
</body>

</html>
